<template>
  <div class="layout layout-100">
    <Layout class="layout-100">
      <Header class="header-cont main__title--top">{{this.$route.params.name}}</Header>
      <Content class="content-cont">
        <Form  ref="formData" :model="formData" label-position="top" :show-message="false">
          <FormItem label="一级类型" v-if="formData.node1 !=='' && $route.params.type === 'details'">
            <Input class="width50" v-model.trim="formData.node1" :disabled="true" ></Input>
          </FormItem>
          <FormItem label="二级类型"  v-if="formData.node2 !=='' && $route.params.type === 'details'">
            <Input class="width50" v-model.trim="formData.node2" :disabled="true" ></Input>
          </FormItem>
          <FormItem label="三级类型"  v-if="formData.node3 !=='' && $route.params.type === 'details'">
            <Input class="width50" v-model.trim="formData.node3" :disabled="true" ></Input>
          </FormItem>
          <FormItem label="四级类型" v-if="formData.node4 !=='' && $route.params.type === 'details'">
            <Input class="width50" v-model.trim="formData.node4" :disabled="true" ></Input>
          </FormItem>
          <FormItem label="五级类型" v-if="formData.node5 !=='' && $route.params.type === 'details'">
            <Input class="width50" v-model.trim="formData.node5" :disabled="true" ></Input>
          </FormItem>

          <FormItem label="风险作业" prop="name" :required="$route.params.type !== 'details'">
            <Input class="width50" v-model.trim="formData.name"  maxlength="60" placeholder="请输入风险作业名称" :disabled="$route.params.type === 'details'"></Input>
          </FormItem>
          <FormItem label="风险类别" prop="riskCategoryIds" :required="$route.params.type !== 'details'" >
            <Select class="width50" transfer :multiple="true" v-model.trim="formData.riskCategoryIds" placeholder="请选择风险类别"  :disabled="$route.params.type === 'details'">
              <Option v-for="item in list" :value="item.id" :key="item.id">{{item.riskCategoryName}}</Option>
            </Select>
          </FormItem>
          <FormItem label="作业分级" prop="riskLevel">
            <Select class="width50" transfer v-model="formData.riskLevel" placeholder="请选择作业分级"  :disabled="$route.params.type === 'details'">
              <Option v-for="item in riskLevelList" :value="item.id" :key="item.id">{{item.name}}</Option>
            </Select>
          </FormItem>
          <FormItem label="分级方法" prop="classificationMethodId">
            <Select class="width50" transfer v-model="formData.classificationMethodId" placeholder="请选择分级方法"  :disabled="$route.params.type === 'details'">
              <Option v-for="item in classList" :value="item.id" :key="item.id">{{item.classificationMethodName}}</Option>
            </Select>
          </FormItem>
          <FormItem label="来源" prop="origin">
            <Input class="width50" v-model.trim="formData.origin" maxlength="60" placeholder="请输入来源" :disabled="$route.params.type === 'details'"></Input>
          </FormItem>
          <FormItem label="具体风险描述" prop="riskDescription">
            <Input class="width50" type="textarea" maxlength="500" v-model.trim="formData.riskDescription" placeholder="请输入具体风险描述" :disabled="$route.params.type === 'details'"></Input>
          </FormItem>
        </Form>
      </Content>
      <Footer class="footer-cont" v-show="$route.params.type !== 'details'">
        <Button type="primary" @click="saveSubmit('formData')">保存</Button>
        <Button @click="closetab">取消</Button>
      </Footer>
    </Layout>
  </div>
</template>

<script>
  import { mapMutations } from 'vuex'
  export default {
    name: "AddEditorDetails",
    data(){
      return{
        formData:{
          "name": '',//"名称",
          "riskCategoryIds": '',//"风险作业类别（多选，用逗号隔开）",
          "riskLevel": '',//" 风险作业等级（1234级）",
          "classificationMethodId": '',//"分级方法",
          "origin": '',//"来源",
          "riskDescription": '',//"具体风险描述",
          "parentId": '',//"父级ID"
        },
        list:[],
        classList:[],
        riskLevelList:[
          {id:'1',name:'一级'},
          {id:'2',name:'二级'},
          {id:'3',name:'三级'},
          {id:'4',name:'四级'},
        ],
      }
    },
    methods:{
      ...mapMutations([
        'closeTag'
      ]),
      closetab () {
        this.closeTag({
          name: this.$route.name,
          params: {...this.$route.params},
          query:{...this.$route.query}
        });
      },
      //风险类别
      getRiskCategoryFindAll(){
        this.$api.measuresLibrary.getRiskCategoryFindAll().then((res) => {
          if (res.code == 200) {
            this.list = res.data;
          } else {
            this.$Message.error(res.message);
          }
        });
      },
      //分级方法
      getRiskOperationClassificationMethod(){
        this.$api.measuresLibrary.getRiskOperationClassificationMethod().then((res) => {
          if (res.code === 200) {
            this.classList = res.data;
          } else {
            this.$Message.error(res.message);
          }
        });
      },
      saveSubmit(){
        if(!this.formData.name){
          this.$Message.warning("风险作业名称不能为空");
          return;
        }
        if(!this.formData.riskCategoryIds.toString()){
          this.$Message.warning("请选择风险作业类别");
          return;
        }
        let prames = {
          "name": this.formData.name,//"名称",
          "riskCategoryIds":this.formData.riskCategoryIds.toString(),//"风险作业类别（多选，用逗号隔开）",
          "riskLevel":this.formData.riskLevel,//" 风险作业等级（1234级）",
          "classificationMethodId":this.formData.classificationMethodId,//"分级方法",
          "origin":this.formData.origin,//"来源",
          "riskDescription":this.formData.riskDescription,//"具体风险描述",
          //"parentId": this.$route.query.parentId//"父级ID"
        }
        if(this.$route.params.type === 'add'){
          prames.parentId = this.$route.params.parentId;
          this.$api.measuresLibrary.getriskInfoLibaddRiskOperation(prames).then((res) => {
            if (res.code === 200) {
              this.$Message.success(res.message);
              this.closetab();
              this.$router.push({
                path:'/risk-source-library/risk-information-labrary'
              })
              localStorage.setItem('page',JSON.stringify(this.page))
            } else {
              this.$Message.error(res.message);
            }
          });
        }else {
          prames.id = this.$route.params.id;
          this.$api.measuresLibrary.getriskInfoLibupdateRiskOperation(prames).then((res) => {
            if (res.code === 200) {
              this.$Message.success(res.message);
              this.closetab();
              this.$router.push({
                path:'/risk-source-library/risk-information-labrary'
              })
              localStorage.setItem('page',JSON.stringify(this.page))
            } else {
              this.$Message.error(res.message);
            }
          });
        }
      },
      getDetail(id){
        this.$api.measuresLibrary.getriskInfoLibdetails(id).then((res) => {
          if (res.code === 200) {
            res.data.riskCategoryIds = res.data.riskCategoryIds.split(',');
            this.formData = {...res.data}
          } else {
            this.$Message.error(res.message);
          }
        })
      },
      initParams() {
        this.page = this.$route.query;
      }
    },
    mounted () {
      this.initParams();
      this.getRiskCategoryFindAll();
      this.getRiskOperationClassificationMethod();
      if(this.$route.params.type === 'editor' || this.$route.params.type === 'details'){
        this.getDetail(this.$route.params.id)
      }
    }
  };
</script>

<style lang="scss" scoped>
  .width50{
    width: 40%;
  }
</style>
